<template>
  <div>
    <div class="filter-container mt-15">
      <statisSearchBar :start-date="listQuery.startDate" :end-date="listQuery.endDate" :show-channel="false" @transferFilter="handleFilter" />
    </div>
    <div style="height:720px;overflow:scroll;">
      <el-table ref="table" :key="tableKey" v-loading="listLoading" :data="list" border stripe @sort-change="sortchange">
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.name"
          :label="column.label"
          :width="column.width || '70'"
          :align="column.align || 'center'"
          :fixed="column.fixed || false"
          :sortable="column.sortable || false"
        >
          <template slot-scope="{ row }">
            <span v-if="column.formatter">{{ column.formatter(row) }}</span>
            <span v-else>{{ row[column.name] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
import waves from '@/directive/waves' // 实现点击波浪纹
import Pagination from '@/components/Pagination'
import checkPermission from '@/utils/permission'
import { getBehaviorLogTypeStatic } from '@/api/actorInfo'
import StatisSearchBar from '@/components/StatisSearchBar'
import { deepClone } from '@/utils'
export default {
  name: 'BehaviorLog',
  directives: { waves },
  components: { Pagination, StatisSearchBar },
  data() {
    return {
      tableKey: 0,
      permissionRoles: this.$store.state.user.permissionRoles,
      header: {
        Authorization: this.$store.state.user.token
      },
      total: 0,
      list: [],
      listLoading: false,
      downloadLoading: false,
      listQuery: {
        startDate: new Date(Date.now() - 86400000 * 9),
        endDate: new Date(),
        sortName: '',
        sortType: '',
        page: 1,
        limit: 200
      },
      bcolumns: [
        { name: 'log_type_name', label: '日志ID', width: '180', fixed: true },
        { name: 'sum', label: '记录总量', width: '100', fixed: true, sortable: 'custom' },
      ],
      columnsDay: [],
      fileList: []
    }
  },
  computed: {
    columns() {
      const bcolumns = deepClone(this.bcolumns)
      const columnsDay = deepClone(this.columnsDay) || []
      return [...bcolumns, ...columnsDay]
    }
  },
  created() {
    this.init()
  },
  methods: {
    sortchange({ prop, order }) {
      console.log(prop)
      console.log(order)
      this.listQuery.sortName = prop
      this.sortBy(order)
    },
    sortBy(order) {
      if (order === 'ascending') {
        this.listQuery.sortType = 'asc'
      } else {
        this.listQuery.sortType = 'desc'
      }
      this.getList('sort')
    },
    checkPermission,
    init() {
      this.getList()
    },
    async getList(type) {
      this.listLoading = true
      const res = await getBehaviorLogTypeStatic(this.listQuery)
      this.listLoading = false
      const dayHeader = res.data.dayHeader
      const newColumnsDay = [] // 创建一个新的数组
      for (let i = 0, keys = Object.keys(dayHeader); i < keys.length; i++) {
        newColumnsDay.push({
          label: dayHeader[keys[i]],
          name: keys[i],
          width: '100',
          align: 'center'
        })
      }
      this.columnsDay = deepClone(newColumnsDay)
      this.list = res.data.items
      this.total = res.data.total
      if (type !== 'sort') {
        // this.tableKey++
      }
    },
    handleFilter(query) {
      this.listQuery = query
      this.getList()
    }
  }
}
</script>
